ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

TABLEでページ一覧を隠す

    ２月１７日のプチ講座で【トップページのページ一覧を変える！改】を紹介しました。
    前回は、タグを載せただけだったので、今回はタグの属性の説明をして見ます。

    　　◆　テーブル全体の説明　◆

    紹介のタグは、テーブルのタグです。まずはテーブル全体のタグを説明しましょう。
    <TABLE style=" position:absolute;top:280;left:10;font-family:Comic Sans MS;font-size:9;color:black;" width=110 height=1500 bgcolor=#696969 cellpadding=0 cellspacing=1 border=1 bordercolor=black>
    </TABLE>
    ↑これがテーブル全体を指定しているタグです。親要素に対して、絶対的な配置の命令を出しています。
    それが、　 position:absolute;top:280;left:10; 　です。
    絶対的に配置しますから、そのＷＥＢのスクリーンの一番手前に表示します。
    top:280;left:10;　は親要素の左上隅を起点にしてテーブルを何処に配置しなさいと命令しております。
    top:280; 　は、上（ＴＯＰ）から２８０ＰＸ下がったところから表示しなさいと命令しております。
    　　　　　　　この数値は個々にいじってみて下さい。数値が小さくなればテーブルは上に行きます。大きくなれば下に下がります。
    left:10; 　は左端から１０ＰＸ　の所からテーブルが始まる、ということを命令しています。この数字はいじらないで下さい。(￣m￣*)V

    font-family:Comic Sans MS;font-size:9;color:black;　はテーブルの中のＦＯＮＴを指定しています。
    font-family:Comic Sans MS;　は字体、Comic Sans MS　と指定しています。
    font-size:9;　　は字の大きさ、９ＰＸ　と指定しています。
    color:black;　　は字の色です。

    width=110 height=1500　はテーブル全体の幅と高さを指定しています。
    width=110　はテーブルの幅ですがこのまま触らなくてもいいでしょう。
    height=1500　は全体の高さですから、テーブル内の内容と照らし合わせて決めて下さい。

    bgcolor=#696969 cellpadding=0 cellspacing=1 border=1 bordercolor=black　の属性の説明です。
    bgcolor=#696969　はテーブル全体の背景色です。背景画像も載せられますが、スペースがないので背景色の方がいいと思います。
    cellpadding=0 cellspacing=1　はテーブルの中のセルの間隔を指定しています。１％に指定しています。
    border=1 bordercolor=black　はテーブル全体の枠の幅と色を指定しています。

    では！次に各セルを説明します。

    　　◆　各セルの説明　◆

    正面玄関 ←これが一つのセルです。黄色のテキストの部分が一つのセルのタグです。

    抜き出して書いたものが↓これです。

    <TR> <TD width="110" height="29" bgcolor="silver"><a href="ここにリンクのＵＲＬ"><img src="ここにアイコンのＵＲＬ" border="0"></a>ここにリンク説明の文字 </TD></TR>

    width="110" height="29"　は各セルの幅　と　高さを指定しています。高さのみアイコンなどの大きさに合わせて、変えてください。
    bgcolor="silver"　は各セルの背景色を指定しています。
    背景画像を指定するには、bgcolor="silver"の替わりに　background="背景画像のURL"
    を入れますと、このようになります。→→→→→    		正面玄関

    この各セルの中でリンクを張るのですが、ここでは、テキストにリンクを貼らないで、
    あえて アイコンの画像→だけにリンクを張っています。
    テキストにリンクを貼りますと、そのテキストの下にアンダーバーが出てしまうからです。
    アンダーバーがでても差し支えないという人は、テキストにリンクを貼ったほうが簡単ですね。
    テキストにリンクを貼りますと、このようになりますね。 ●正面玄関

    タグは↓　これですね！
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="ここにリンクのＵＲＬ">ここにリンク説明の文字</a> </TD></TR>

    お判りでしょうか！このタグは <TABLE> のタグに位置を指定して、簡単に言えば
    セルを縦に並べただけなのです。↓簡単に書けば、こんな風です。

    <TABLE>
    <TR><TD>
    <a href="リンクのページのＵＲＬ"> <img src="アイコン画像のＵＲＬ"></a> リンク説明文
    </TD></TR>
    <TR><TD>
    <a href="リンクのページのＵＲＬ"> <img src="アイコン画像のＵＲＬ"></a> リンク説明文
    </TD></TR>
    <TR><TD>
    これの繰り返しです。
    </TD></TR>
    </TABLE>

    下の方に書いてあります、↓これは、テーブルの高さの調整のためつけています。

    <TR><TD width="110" height="750" VALIGN="top" bgcolor="pink"><BR> 　　【お知らせ】<BR><BR> ココにTEXTを書きます。<BR> </TR></TD>

    各自の「ページ一覧」の長さで調節して下さい。height=""　で調節します。（ピンクの一番下のセル）
    背景色をページの背景色と同じくしたり、背景画像と同じくしますと、よりいっそう同化しますね。



    <TABLE style=" position:absolute;top:280;left:10;font-family:Comic Sans MS;font-size:9;color:black;" width=110 height=1500 bgcolor=#696969 cellpadding=0 cellspacing=1 border=1 bordercolor=black>
    <TR> <TD width="110" height="29" bgcolor="silver"> <a href="http://plaza.rakuten.co.jp/gtone/002001"> <img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"> </a> 正面玄関
     </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/003000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>もう一つのプロフ
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/017001"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>ＨＰの飾付教室
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/003002"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>おもしろタグ教室
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/004001"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>プレート教室
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/002000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>写真集
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/006000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>壁紙チェンジャ
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/007000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>リンク集
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/009000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>キリ番
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/00500"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>プレート置き場
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/016000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>日記リンク皆様
    </TD></TR> <TR><TD width="110" height="29"> </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="hotpink"><a href="http://plaza.rakuten.co.jp/gtone/002002"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>プチ講座MENU
    </TD></TR>
    <TR><TD width="110" height="29"> </TD></TR> <TR> <TD width="110" height="29" bgcolor="pink"><a href="http://plaza.rakuten.co.jp/gtone/011000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>カラーコード表
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="pink"><a href="http://plaza.rakuten.co.jp/gtone/011001"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>カラーネーム表
    </TD></TR>
    <TR><TD width="110" height="29"> </TD></TR>
    <TR><TD width="110" height="750" VALIGN="top" bgcolor="pink"><BR> 　　【お知らせ】<BR><BR> ココにTEXTを書きます。<BR> </TR></TD>
    </TABLE>



正面玄関
もう一つのプロフ
ＨＰの飾付教室
おもしろタグ教室
プレート教室
写真集
壁紙チェンジャ
リンク集
キリ番
プレート置き場
日記リンク皆様
プチ講座MENU
カラーコード表
カラーネーム表

　　【お知らせ】

ココにTEXTを書きます。
© Rakuten Group, Inc.